<template>
  <div style="max-width: 1200px; margin: 0 auto">
    <el-descriptions class="margin-top" title="测试报告" :column="2" border>
      <template #extra>
        <el-button-group :size="'small'">
          <el-button
            type="primary"
            :disabled="!show_table"
            @click="showcontent(show_table)"
          >
            图表</el-button
          >
          <el-button
            type="primary"
            :disabled="show_table"
            @click="showcontent(show_table)"
            >列表</el-button
          >
        </el-button-group>
      </template>
      <el-descriptions-item>
        <template #label>
          <i class="el-icon-timer"></i>
          开始时间
        </template>
        <span v-html="info.start"></span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <i class="el-icon-time"></i>
          持续时间
        </template>
        <span v-html="info.duration"></span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <i class="el-icon-monitor"></i>
          平台信息
        </template>
        <span v-html="info.plateform"></span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <i class="el-icon-cpu"></i>
          运行信息
        </template>
        <span v-html="info.complie"></span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <i class="el-icon-tickets"></i>
          备注
        </template>
        <span v-html="info.other"></span>
      </el-descriptions-item>
    </el-descriptions>
    <div style="height: 50px"></div>
  </div>
</template>

<script>
export default {
  props: {
    msg: Boolean,
    show_table2:Boolean
  },
  watch:{
    show_table2(val){
      // console.log(1,val)
      this.show_table=val;
    }
  },

  data() {
    return {
      show_table: false,
      info1: {
        start: "12312312312",
        duration: "123123123",
        plateform: "1231231111",
        complie: "11122233",
        other: "oooooooooooo",
      },
      info: {
        start: "未知",
        duration: "未知",
        plateform: "未知",
        complie: "未知",
        other: "",
      },
    };
  },

  methods: {

    showcontent(v) {
      // console.log(2,v);
      this.show_table = !v;
      this.$emit("sendValue", !v);
      
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style >
.el-descriptions__title {
  font-size: 26px;
}

.el-descriptions__label.is-bordered-label {
  font-weight: 800;
  color: black;
  font-size: 17px;
  background-color: skyblue;
}
.el-descriptions__body {
  color: black;
  background-color: lightblue;
  font-size: 15px;
}
.el-descriptions .is-bordered td,
.el-descriptions .is-bordered th {
  border: 2px solid #ebeef5;
  padding: 12px 10px;
}
</style>
